import type { FormEvents, WidgetOptions } from '@/components/lib/Form'
import { sleep } from '@/utils/tool'
import { Modal } from 'ant-design-vue'
import { defineComponent, ref, Ref } from 'vue'

export default defineComponent({
  name: 'FormView',
  setup() {
    const spsForm: Ref<any> = ref(null)
    const options: WidgetOptions[] = [
      {
        type: 'input',
        label: '用户名',
        prop: 'username',
        rules: [
          {
            required: true,
            message: '用户名不能为空'
          },
          {
            min: 2,
            max: 6,
            message: '用户名在2-6位之间'
          }
        ],
        attrs: {
          allowClear: true
        },
        slots: {
          addonBefore() {
            return <sps-icon name="user" />
          }
        }
      },
      {
        type: 'password',
        label: '密码',
        prop: 'password',
        rules: [
          {
            required: true,
            message: '密码不能为空'
          },
          {
            min: 6,
            max: 15,
            message: '密码在6-15位之间'
          }
        ],
        attrs: {
          allowClear: true
        },
        slots: {
          addonBefore() {
            return <sps-icon name="lock" />
          }
        }
      },
      {
        type: 'custom',
        label: '图标',
        prop: 'userIcon',
        rules: {},
        render(model, option) {
          return (
            <sps-icon-select
              v-model:value={model.value.userIcon}
              {...option.attrs}
            />
          )
        }
      },
      {
        type: 'switch',
        label: '是否在职',
        prop: 'onPost',
        attrs: {
          checkedChildren: '在职',
          unCheckedChildren: '离职'
        }
      },
      {
        type: 'number',
        label: '年龄',
        prop: 'age',
        attrs: {
          precision: 0,
          min: 0,
          max: 99
        }
      },
      {
        type: 'cascader',
        label: '籍贯',
        prop: 'hometown',
        attrs: {
          placeholder: '请选择',
          async remoteLoad() {
            return await sleep(() => {
              return [
                {
                  value: 'x',
                  label: 'X省',
                  children: [
                    { value: 'a', label: 'A市' },
                    { value: 'b', label: 'B市' }
                  ]
                },
                {
                  value: 'y',
                  label: 'Y省',
                  children: [
                    { value: 'c', label: 'C市' },
                    { value: 'd', label: 'D市' }
                  ]
                }
              ]
            })
          }
        }
      },
      {
        type: 'treeSelect',
        label: '部门',
        prop: 'department',
        attrs: {
          async remoteLoad() {
            return await sleep(() => {
              return [
                {
                  label: 'x公司',
                  value: '1',
                  children: [
                    {
                      label: '人力部',
                      value: '2',
                      children: [],
                      isLeaf: true
                    },
                    {
                      label: '财务部',
                      value: '3',
                      children: [],
                      isLeaf: true
                    }
                  ],
                  selectable: false
                }
              ]
            })
          }
        }
      },
      {
        type: 'select',
        label: '职位',
        prop: 'role',
        attrs: {
          placeholder: '请选择',
          options: [],
          async remoteLoad() {
            return sleep(() => {
              return [
                { label: '经理', value: 1 },
                { label: '主管', value: 2 },
                { label: '员工', value: 3 }
              ]
            })
          }
        }
      },
      {
        type: 'datePicker',
        label: '入职日期',
        prop: 'employDate',
        attrs: {
          mode: 'month'
        }
      },
      {
        type: 'rangePicker',
        label: '请假时间',
        prop: 'holiday',
        attrs: {
          showTime: true
        }
      },
      {
        type: 'timePicker',
        label: '上班时间',
        prop: 'workingTime',
        attrs: {
          format: 'HH:mm',
          minuteStep: 5
        }
      },
      {
        type: 'checkbox',
        label: '兴趣爱好',
        prop: 'hobby',
        attrs: {
          async remoteLoad() {
            return await sleep(() => {
              return [
                { label: '足球', value: 1 },
                { label: '篮球', value: 2 },
                { label: '排球', value: 3 }
              ]
            }, 3000)
          }
        }
      },
      {
        type: 'radio',
        label: '性别',
        prop: 'sex',
        attrs: {
          options: [
            { label: '男', value: 0 },
            { label: '女', value: 1 }
          ]
        }
      },
      {
        type: 'rate',
        label: '评分',
        prop: 'score',
        attrs: {
          allowHalf: true
        }
      },
      {
        type: 'slider',
        label: '完成情况',
        prop: 'process',
        attrs: {
          marks: {
            0: '0%',
            100: '100%'
          }
        }
      },
      {
        type: 'upload',
        label: '附件',
        prop: 'file',
        rules: [
          {
            required: true,
            message: ''
          },
          {
            validator(_, value) {
              if (value && value.length > 0) {
                return Promise.resolve()
              } else {
                return Promise.reject('必须上传附件')
              }
            }
          }
        ],
        slots: {
          default() {
            return (
              <a-button type="primary">
                <sps-icon name="upload" />
                选择文件
              </a-button>
            )
          }
        }
      },
      {
        type: 'textarea',
        label: '备注',
        prop: 'remark',
        attrs: {
          showCount: true
        }
      }
    ]
    const formProps = {
      labelCol: { span: 3 },
      wrapperCol: { span: 18 }
    }
    const model: Ref<any> = ref({
      username: 'admin',
      password: '123456',
      onPost: true,
      age: 18,
      role: 2,
      hobby: [1, 2],
      sex: 0,
      score: 2.5,
      process: 80,
      file: [
        {
          uid: '1',
          name: 'xxx.png',
          status: 'done',
          response: 'Server Error 500', // custom error message to show
          url: 'http://www.baidu.com/xxx.png'
        }
      ]
    })
    const formEvents: FormEvents = {
      refSubmit: {
        title: '提交(ref)',
        handler() {
          spsForm.value.submit()
        }
      }
    }
    /* render 函数 */
    return () => {
      return (
        <sps-form
          ref={spsForm}
          model={model.value}
          options={options}
          {...formProps}
          actions="reset,refSubmit,submit"
          formEvents={formEvents}
          onSubmit={(value: any) => {
            Modal.info({
              title: '表单结果',
              width: '800px',
              content: <pre>{JSON.stringify(value, null, 2)}</pre>
            })
          }}></sps-form>
      )
    }
  }
})
